<template>
    <div class="center">
        <div class="center-main">
          <div class="center-main-login">
            <span class="iconfont icon-wode_huaban1 icon-font"></span>
            <div class="login">立即登录</div>
          </div>
          <div class="center-main-order">
            <div class="film-order">
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan2"></use>
                </svg>
              </p>
              <p>电影订单</p>
            </div>
            <div class="shop-order">
              <p>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan3"></use>
                </svg>
              </p>
              <p>商品</p>
            </div>
          </div>
          <div class="center-main-lable">
            <div class="center-main-lable-vouchers">quan</div>
            <div class="center-main-lable-redEnvelope">redEnvelope</div>
            <div class="center-main-lable-balance">balance</div>
            <div class="center-main-lable-settings">settings</div>
          </div>
        </div>
    </div>
</template>
<script>
export default {
  beforeRouteEnter (to, from, next) {
    var isLogin = true
    console.log('路由守卫，center组件内局部守卫')
    if (isLogin) {
      next()
    } else {
      next('/login')
    }
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style lang="scss" scoped>
.center{
  // background: #f4f4f4;
  background: cyan;
  .center-main {
    .center-main-login {
      width:100%;
      height:158px;
      text-align: left;
      margin-top: -44px;
      padding-left: 22px;
      padding-top: 64px;
      background: url('/img/aa.png');
      background-size: cover;
      color: #fff;
      .icon-font {
        text-align: center;
        font-size:42px;
        margin: 50px 0 0 20px;
        display:block;
        width: 63px;
        height: 63px;
        line-height: 63px;
        border-radius: 35px;
        margin-right: 20px;
        border: 2px solid #fff;
        float:left;
      }
      .login {
        float:left;
        font-size: 20px;
        margin-top:50px;
        width: 150px;
        height: 63px;
        line-height: 63px;
      }
    }
    .center-main-order {
      width:100%;
      height:40px;
      background:white;
      margin: 10px 0;
      font-size:10px;
      color: #797d82;
      background: #fff;
      .film-order {
        width:50%;
        height:20px;
        line-height: 20px;
        float:left;
        text-align: center;
        p:nth-child(1) {
          .icon {
            width: 20px;
            height: 20px;
            // vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
          }
        }
      }
      .shop-order {
        width:50%;
        height:20px;
        line-height: 20px;
        float:right;
        text-align: center;
        p:nth-child(1) {
          .icon {
            width: 3em;
            height: 3em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
          }
        }
      }
    }
    .center-main-lable {
      width:100%;
      // height:auto;
      background:white;
      .center-main-lable-vouchers{
        width:100%;
        height:20px;
        background:white;
      }
      .center-main-lable-redEnvelope {
        width:100%;
        height:20px;
        background:white;
      }
      .center-main-lable-balance {
        width:100%;
        height:20px;
        background:white;
      }
      .center-main-lable-settings {
        width:100%;
        height:20px;
        background:cyan;
      }
    }
  }
}
  .header-search {
    margin-top:6px;
    width:60%;
    height: 20px;
    line-height: 20px;
    float:left;
    text-align: center;
    background-color: #26a2ff;
    input:nth-child(1) {.city-header {
    width: 100%;
    background-color: #26a2ff;
    color:white;
    font-size:14px;
    .header {
    margin:0px 10px;
    height: 36px;
    .header-back {
      height: 36px;
      line-height: 36px;
      width:20%;
      float:left;
    }
    .header-search {
      margin-top:6px;
      width:60%;
      height: 20px;
      line-height: 20px;
      float:left;
      text-align: center;
      background-color: #26a2ff;
      input:nth-child(1) {
        width:80%;
        background-color: #fff;
        text-align: center;
        color:#26a2ff;
        border-color: #fff;
        border-radius: 10px;
      }
    }
    .header-city {
      width:20%;
      height: 36px;
      line-height: 36px;
      float:right;
      text-align: right;
    }
  }
}
      width:80%;
      background-color: #fff;
      text-align: center;
      color:#26a2ff;
      border-color: #fff;
      border-radius: 10px;
    }
  }
</style>
